<template>
    <!-- 一个产品有一个或者多个图片，商品的定位（数码产品/交通工具等），价格，描述的话，店铺名称，加上唯一标识，表格应该有6项 -->
    <div class="main-contain"> 
      <div style="margin-top: 20px;">
        <!-- <Space direction="vertical" size="large" type="flex">
          <Input search enter-button="Search" placeholder="Enter something..." />
      </Space>     -->
      </div>
      <div class="min-contain">
        <Input placeholder="搜索你感兴趣的商品" style="width: 700px;margin-left: 10px;margin-top: 10px;" v-model="keyText">
                <template #suffix>
                    <Icon type="ios-search" @click="showFilter()"/>
                </template>
            </Input>
      <Row>
          <Col v-for="item in filteredData" :key="item.productId">
        <Card style="width:372px;height:200px;margin: 10px;">
          <div style="display: flex;width:370px ;height: 18px;"  @click="productClick(item)">
          <div style="width: 190px;height: 170px;">
            <img style="width: 100%;height: 100%;" :src=item.imgInfosBOs[0].imgUrl>
          </div>
          <div style="width: 160px;height: 170px;">
           
            <div style="width: 100%;height: 100px;"><Col span="24" class="text" >{{item.title}}</Col></div>
            <div style="width: 100%;height: 70px;">
             <h1 style="color:coral;"> ￥{{item.price}}</h1>
            </div>
          </div>
          </div>
      </Card>
    </Col>
    </Row>
    <!-- 点击产品的时候展示产品的详细信息 -->
    <Modal v-model="modal" fullscreen >
    <div class="product-container">
      <div class="product-images" v-for="item in picList" :key="item.id">
        <img :src=item.imgUrl alt="product image" />
      </div>
      <div class="product-details">
        <h1 class="product-title">{{title}}</h1>
        <p class="product-price">￥{{price}}</p >
        <p class="product-description">{{description}}</p >
        <div class="seller-info">
          <div class="seller-avatar">
            <img :src="userMess.headUrl" alt="seller avatar" />
          </div>
          <div class="seller-details">
            <p class="seller-name">{{ userMess.nickname }}</p >
            <i style="color: blue;font-size: 12px;" @click="jumpother(userMess.studentId)">点击查看卖家详情</i >
          </div>
          <div class="seller-details-two">
            <Button type="success" @click="handleClick">我想要</Button>
          </div>
        </div>
      </div>
        <!-- 评论信息 -->
        <div class="comments">
        <h3>商品评论</h3>
        <div class="comment-list">
          <div class="comment-item" v-for="comment in remarkLists" :key="comment.id">
            <div class="comment-avatar">
              <img :src=comment.headUrl />
            </div>
            <div class="comment-detail">
              <div class="comment-header">
                <div class="comment-nickname">{{ comment.nickname }}</div>
                <div class="comment-time">{{ comment.createDate }}</div>
              </div>
              <div class="comment-content">{{ comment.remark}}</div>
            </div>
          </div>
        </div>
        <div class="comment-form">
          <!-- <div class="form-group">
            <label for="nickname">昵称：</label>
            <input type="text" id="nickname" v-model="newComment.nickname" />
          </div> -->
          <div class="form-group">
            <label for="content">评论：</label>
            <textarea id="content" v-model="newCommentone"></textarea>
          </div>
          <div class="form-group">
            <button @click="addComment">提交</button>
          </div>
        </div>
      </div>
    </div>
      </Modal>
  </div>
    </div>
  
  </template>
  
  <script>
  import { Col, Row } from 'view-design';
  import axios from "axios";
  
  export default{
      // 请求数据库将所有的数据保存的数组里面，使用for循环将其展示出来。
      data() {
          return {
            isLoggedIn :localStorage.getItem("isLoggedIn"),
            user:[],
            price:'',
            picList:'',
            keyText:'',
            productId:'',
            title:'',
            time:'',
            description:'',
            howMuch: '',
            ProductPresentation: '',
            imgSrc:'',
            name:'',
            userNumber:'' ,
            userFalseame:'',
            src:'',
            newCommentone:'',
            modal:false,
            value: 0 ,
            showProduct:[],
            userMess:'',
            modelitem:[],
            productImgList:[],
            productDTOS: [
                  // { id: "1", howMuch: "20", ProductPresentation: "这是一件衣服", imgSrc :require("../assets/text6.png"), name:"测试", userNumber:"admin" ,userFalseame:"测试账号",src:require("../assets/bear.png"),typeModel:'0',time:'2025/5/1',description:'由于跟女朋友分手，这件衣服是我女朋友送我的，当时100天给我买的衣服，就试了一下，发现大小不合适，也没有说，衣服是品牌衣服。现在分手了，低价卖了'},
                //   adminStatus: 1
                //   description: "12123213"
                //   imgInfosBOs: null
                //   price: 11
                //   productId: 1
                //  productType: 3
                //  status: 1
                //   studentId: 1
                //   title: "11"
              ],
              currentType: "all",
              comments: [],
              remarkLists:[],
        newComment: {
          nickname: "",
          content: "",
        },
          };
      },
      components: { Row, Col },
      mounted(){
        const savedUser = localStorage.getItem("user");
    console.log(localStorage.getItem("user"));
    if (savedUser) {
      this.user = JSON.parse(savedUser);
      console.log(111111111111111,this.user);
    }
        //调用接口获取所有产品的信息
      },
      methods:{
        handleClick(){
          this.$Message.info("订单生产中，请稍后");
          this.$router.push({
            name:'custMessage',
            params:{
             productId:this.productId,
             studentId:this.user.studentId,
             buyStatus:'1'
            }
          })
        },
        showFilter(){
      axios.post('http://localhost:8081/salvage/products/getProductByLike',
      {
        qryName:this.keyText
      }).then((res)=>{
        if(res.data.code == '00000'){
          console.log('查询成功');
          this.productDTOS = res.data.data.productDTOS
          console.log(this.productDTOS);
          console.log(this.productDTOS);
        }
      })
    },
        showAllProduct(){
          this.remarkLists = [];
          axios
          .post(
            "http://localhost:8081/salvage/products/getProductInfos",
            {
             adminStatus:"1",
             productStatus:"1"
            }
          )
          .then((response) => {
            if (response.data.code == "00000") {
              console.log(response.data.data);
              this.productDTOS = response.data.data.productDTOS
              console.log(this.productImgList);
            }
          });
        },

    showAllComment(){
      axios
    .post("http://localhost:8081/salvage/remark/getRemarks",
     {
      qryType : "3",// 3.商品 4.帖子
      // studentId:this.user.studentId,
      productId:this.productId,//商品id
      // opusId: "1",//帖子id
     }).then((response) =>{
      if (response.data.code === '00000') {
        console.log(response.data.data.remarkList);
       this.remarkLists = response.data.data.remarkList
      }
     })
    },
    addComment() {
          axios
    .post("  http://localhost:8081/salvage/remark/addOneRemark",
     {
        studentId:this.user.studentId,
        qryType : "3",
        productId:this.productId,
        remark: this.newCommentone
     }).then((response) =>{
      if (response.data.code === '00000') {
        console.log('上传成功');
        this.newCommentone='',
        this.showAllComment()
      }
     })
      },
        filterByType(type) {
              this.currentType = type;
              
          },
        productClick(item){
          this.showAllComment();
         console.log(item);
         this.picList = item.imgInfosBOs
         this.productId = item.productId
         console.log(this.picList);
         axios
          .post(
            "http://localhost:8081/salvage/students/getStudentAndProdById",
            {
                studentId:item.studentId
            }
          )
          .then((response) => {
            if (response.data.code == "00000") {
              console.log(11111,response.data.data);
              this.userMess = response.data.data;
            }
          });
         this.price = item.price;
         this.title =item.title;
         this.description =item.description;
        this.modal = true;
        
        },
        jumpother(id){
          console.log(id);
          this.$router.push({
            name:'otherMessage',
            params:{
             studentId:id,
            }
          })
        },
        warning(nodesc){
          this.$Notice.warning({
                  title: '提示',
                  desc: nodesc ? '' : '由于你没有登录，系统已为你跳转到登录页面'
                  });
        }
      },
      created(){
       this.showAllProduct()
      },
      computed: {
        filteredData() {
              if (this.currentType === "all") {
                  return this.productDTOS;
              }
              else {
                  return this.productDTOS.filter(item => item.productType === this.currentType);
              }
          }
      },
  }
  </script>
  
  <style scoped>
  .layout-content{
      /* background: #0F8DE9; */
      /* min-height: 120px; */
      height: 800px;
      /* line-height: 120px; */
  }
  .layout-sider{
      /* background: #3A9FE8; */
      /* min-height: 120px; */
      /* line-height: 120px; */
  }
  .main-contain{
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #a8a3a3;
    overflow:auto;
  }
  .main-container{
    width: 100%;
    height: 70px;
    /* display: flex; */
    background: #ffffff;
    justify-content: center;
    align-items: center;
    overflow:auto;
  }
  .min-contain{
  width: 100%;
  height: 100%;
  overflow:auto;
  background: #dadada;
  }
  .main-containtwo{
  width: 70%;
  margin-left: 15%;
  height: 770px;
  overflow:auto;
  background: #d3d3d3;
  }
  .min-top{
    height: 350px;
    width: 100%;
    display: flex;
    /* background: aliceblue; */
  }
  .min-left{
  width: 23%;
  border-radius:20px ;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 10px;
  }
  .min-right{
    width: 73%;
    height:350px;
    border-radius:20px ;
    margin-left: 1%;
    margin-right: 1%;
  }
  .min-right-top{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:44px;
    margin-top: 3px;
    margin-bottom: 3px;
    /* margin-left: 1%; */
    /* margin-right: 1%; */
  }
  .min-right-bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:300px;
    border-radius:20px ;
    margin-left: 1%;
    margin-right: 1%;
  }
  .min-bottom-right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34%;
    height: 300px;
    border-radius:20px ;
  }
  .min-bottom-middle{
    width: 66%;
    border-radius:20px ;
    height: 300px;
  }
  .img-contain{
    background: #16d1c2;
    width: 100%;
    height: 300px;
    border-radius:20px ;
  }
  .right-min{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  .right-button{
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  .show-right-button{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  .right-min-btn{
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  .text{
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; 
  }
  .product-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 2rem;
  }
  
  .product-images {
    width: 50%;
  }
  
  .product-images img {
    width: 100%;
    height: auto;
  }
  
  .product-details {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .product-title {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
  }
  
  .product-price {
    font-size: 1.5rem;
    margin: 0;
  }
  
  .product-description {
    font-size: 1.2rem;
    margin: 0;
  }
  
  .seller-info {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .seller-avatar img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
  }
  
  .seller-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .seller-details-two {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 180px;
  }
  
  .seller-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
  }
  
  .seller-joined {
    font-size: 1rem;
    margin: 0;
  }
  .product-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  
  .product-detail {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .product-detail h2 {
    margin: 0;
  }
  
  .product-image {
    margin-right: 20px;
  }
  
  .product-image img {
    width: 200px;
    height: 200px;
    cursor: pointer;
  }
  
  .product-price {
    font-size: 20px;
    color: red;
  }
  
  .seller-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .seller-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .seller-info-detail {
    display: flex;
    flex-direction: column;
  }
  
  .comments {
    width: 50%;
  }
  
  .comments h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .comment-list {
    margin-bottom: 20px;
  }
  
  .comment-item {
    display: flex;
    margin-bottom: 10px;
  }
  
  .comment-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .comment-detail {
    display: flex;
    flex-direction: column;
  }
  
  .comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }
  
  .comment-nickname {
    font-weight: bold;
    margin-right: 10px;
  }
  
  .comment-time {
    color: #999;
  }
  
  .comment-content {
    margin-left: 60px;
  }
  
  .comment-reply {
    margin-left: 60px;
    margin-top: 10px;
    padding-left: 10px;
    border-left: 1px solid #ccc;
  }
  
  .comment-reply-header {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
  }
  
  .comment-reply-header span:first-child {
    font-weight: bold;
  }
  
  .comment-reply-header .comment-nickname {
    font-weight: normal;
    margin-left: 5px;
  }
  
  .comment-reply-content {
    margin-left: 20px;
    font-size: 14px;
  }
  
  .comment-form {
    margin-bottom: 20px;
  }
  
  .comment-form .form-group {
    display: flex;
    margin-bottom: 10px;
  }
  
  .comment-form .form-group label {
    margin-right: 10px;
    width: 60px;
    text-align: right;
  }
  
  .comment-form .form-group input[type="text"],
  .comment-form .form-group textarea {
    flex: 1;
    padding: 5px;
  }
  
  .comment-form .form-group button {
    padding: 5px 10px;
    background-color: #337ab7;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  
  .product-modal {
    display: flex;
  }
  
  .product-modal .product-image {
    margin-right: 20px;
  }
  
  .product-modal .product-image img {
    width: 300px;
    height: 300px;
  }
  
  .product-modal .product-detail {
    flex: 1;
  }
  
  .product-modal .product-detail h2 {
    margin-top: 0;
  }
  </style>